<template>
	<view class="content padding">
		<!-- 货物状态弹窗 -->
		<u-picker :show="showState" :title="titleState" :columns="columnsState" keyName="name" @confirm="confirmReason"
			@cancel="showState=false" confirmColor="rgba(243, 39, 28, 1)"></u-picker>
		<!-- 退款方式弹窗 -->
		<u-picker :show="showWay" :title="titleWay" :columns="columnsWay" keyName="name" @confirm="confirmWay"
			@cancel="showWay=false" confirmColor="rgba(243, 39, 28, 1)"></u-picker>
		<!-- 申请原因弹窗 -->
		<u-picker :show="show" :title="title" :columns="columns" keyName="name" @confirm="confirmState" @cancel="show=false"
			confirmColor="rgba(243, 39, 28, 1)"></u-picker>
		<view class="padding ffffff radius flexbetween" @click="showState=true">
			<view class="titletext">货物状态</view>
			<view class="flexright">
				<input class="textright margin_right2" type="text" placeholder="请选择货物状态" disabled=""
					v-model="stateName">
				<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
			</view>
		</view>
		<view class="padding ffffff radius flexbetween" @click="selectWay">
			<view class="titletext">退款方式</view>
			<view class="flexright">
				<input class="textright margin_right2" type="text" placeholder="请选择退款方式" disabled="" v-model="typeName">
				<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
			</view>
		</view>
		<view class="padding ffffff radius flexbetween" @click="selectReason">
			<view class="titletext">申请原因</view>
			<view class="flexright">
				<input class="textright margin_right2" type="text" placeholder="请选择申请原因" disabled="" v-model="thlx">
				<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12"></u-icon>
			</view>
		</view>
		<view class="padding ffffff radius flexbetween margin_top">
			<view class="titletext">退款金额</view>
			<view class="qianshu ">￥{{orderPrice==null?0:orderPrice}}</view>
		</view>
		<view class="padding ffffff radius margin_top">
			<view class="titletext">申请说明</view>
			<textarea v-model="content" class="textareas text_a margin_top" placeholder="请您详细填写申请说明"
				placeholder-style="font-size: 28rpx;font-weight: 500;color: #999999;"></textarea>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb">
			<view class="bigbtn" @click="tzddxq">提交申请</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				showState: false,
				showWay: false,
				title: "请选择申请原因",
				titleState: "请选择货物状态",
				titleWay: "请选择退款方式",
				thlx: "", // 退款原因
				thlxid: "",
				columns: [],
				state: 0, //0未收到 1已收到
				stateName: "",
				columnsState: [
					[{
						id: 0,
						name: "未收到"
					}, {
						id: 1,
						name: "已收到"
					}]
				], //货物状态
				type: 0, //0仅退款 1退货退款
				typeName: "",
				columnsWay: [
					[{
						id: 0,
						name: "仅退款"
					}, {
						id: 1,
						name: "退货退款"
					}]
				], //退款方式
				orderID: '', // 订单id
				orderPrice: '', // 退款金额
				content: '', // 退款说明
			}
		},
		onLoad(options) {
			let _this = this
			_this.orderID = options.id
			// _this.getOrderTklx()
		},
		methods: {
			getFrom() {
				let _this = this
				httpRequest.request('/api/goods_refund/refundpre', 'GET', {
					order_id: _this.orderID, // 订单ID
					is_refund_all: 1,
					receiving_status: _this.state,
					refund_type: _this.type,
					// refund_money: this.orderPrice,
					// refund_reason: _this.thlx, // 退款原因
					// refund_content: _this.content, // 退款说明
					// refund_images: "",
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.orderPrice = res.data.max_refund_money
						_this.columns.push(res.data.reasondata)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			tzddxq() { //提交申请
				let _this = this
				if (_this.thlx == '') {
					httpRequest.toast('请选择申请原因');
					return false
				}
				httpRequest.request('/api/goods_refund/refund', 'POST', {
					order_id: _this.orderID, // 订单ID
					is_refund_all: 1,
					receiving_status: _this.state,
					refund_type: _this.type,
					refund_money: this.orderPrice,
					refund_reason: _this.thlx, // 退款原因
					refund_content: _this.content, // 退款说明
					refund_images: "",
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 获取订单退款理由
			// getOrderTklx() {
			// 	let _this = this
			// 	httpRequest.request('/api/goods_refund/refundpre', 'GET', {
			// 		order_id: this.orderID,
			// 		is_refund_all: 1,
			// 		receiving_status: 1,
			// 		refund_type: 1
			// 	}, false, false, true).then(res => {
			// 		this.orderPrice = res.data.max_refund_money
			// 		_this.columns.push(res.data.reasondata)
			// 	})
			// },
			confirmReason(e) { //确认货物状态
				this.state = e.value[0].id
				this.stateName = e.value[0].name
				this.showState = false
			},
			selectWay() { //选择退款方式
				if (!this.stateName) {
					httpRequest.toast("请先选择货物状态！");
					return false
				}
				this.showWay = true
			},
			confirmWay(e) { //确认退款方式
				this.type = e.value[0].id
				this.typeName = e.value[0].name
				this.showWay = false
				this.getFrom()
			},
			selectReason() { //选择申请原因
				if (!this.typeName) {
					httpRequest.toast("请先选择退款方式！");
					return false
				}
				this.show = true
			},
			confirmState(e) { //确认申请原因
				this.thlx = e.value[0].name
				this.thlxid = e.value[0].id
				this.show = false
			},
			// confirms(e) {
			// 	this.sqyy = e.value[0].name
			// 	this.shows = false
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.notitletext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.titletext {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
	}

	.qianshu {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(243, 39, 28, 1);
	}

	.huisetext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>